JSX is a funny tag syntax. It is neither a string nor HTML. In this article, i am starting from the very basics and walk through everything you need to know about JSX. If you’ve ever wanted to learn React in Hindi, You can visit our Youtube Channel React Playlists. Here in this article, i will show you 10 points to give you depth knowledge about JSX. 

Introduction of JSX

1. JSX stands for javascript XML.
2. It is a syntax extension to Javascript.
3. JSX is a preprocessor step that adds XML syntax to Javascript.
4. JSX produces React “element”. It is possible to create elements without JSX but JSX makes React a lot more elegant.
5. It is recommended to use JSX with React to describe what the UI should look like.
6. It also allows React to show more useful error and warning messages.

7. JSX is easier to read and write. Babel transforms these expressions into an actual Javascript Code.

For Example:-

Consider the following JSX Element:

Example JSX Element 1:-
const element =
 Hello Tutorialswebsite

Example JSX Element with attribute:-
const element = 
 Hello Tutorialswebsite

Example JSX Element declare a variable called name:-
const element =
 Hello {name}

Example JSX Element as component :-
const element = 

Example JSX Element as component with props:-
const element =

The JavaScript delivered to the browser will look like this:

React.createElement("h1", null, "Hello Tutorialswebsite");

React.createElement("h1",{className:"title"}, "Hello Tutorialswebsite");

React.createElement("h1", null, "Hello",name);

React.CreateElement(Education, null);

React.createElement(Eduction, {name:"Tutorialswebsite"});

In the above example, you can see the JSX code looks like HTML but it is not an HTML. Lets clear above example with syntax declaration:

JSX Syntax:

 Children Text  

or


or

 Children Text { Dynamic Variable }

Javascript Syntax:

 //if props and dynamic value both are declare:

React.createElement("elementType",{props:"value"}, "Children Text", Dynamic Variable);

// if props declare but not dynamic value:

React.createElement("elementType",{props:"value"}, "Children Text");

// if neither props nor dynamic value declare:

React.createElement("elementType",null, "Children Text");
 
Note:- here "null" will take place in place of props but dynamic value will not

// if element is as component with props:

React.createElement("componentName",{props:"value"});

// if element is as component but not props declare:

React.createElement("componentName",null);
 
Note:-  here also "null" will take props place.

8. JavaScript Expression in JSX

we can put any valid JavaScript expression inside the curly braces in JSX. You can pass any JavaScript expression as children, by enclosing it with {}. In React we are allowed to use normal JavaScript expressions with JSX.

Syntax:- {expression}

Example:-

 const el =
{2+5}

// Output: 7

const el=
 Value: {2+5}

// Output:- Value:7

const name ="Tutorialswebsite"
 const el =
 Hello {name}

// Output: Hello Tutorialswebsite

function display(){
return "Tutorialswebsite";
}
const el =
 Hello {display()}

// Output:-  Hello Tutorialswebsite

let student={
firstname: "Tutorialswebsite"
}
const el =
 Hello {student.firstname}

// Output:- Hello Tutorialswebsite

9. Specifying Attributes with JSX

you may use quotes to specify string literals as attributes.

Syntax:

const el =
 

Example:

const el =
Tutorialswebsite
 const el =Website Name

You may also use curly braces to embed a JavaScript expression in an attribute.

const el = 
Hello Tutorialswebsite

 ReactDOM.render(, document.getElementById("root"));

Note:-

• Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.
• Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (For String value) or braces (For expression) but not both in the same attribute.

10. Object Representation of JSX

Babel compiles JSX down to React.createElement() calls.

const el =
 Hello World

  const el =React.createElement("h1",{
  className:"title"
  }, "Hello World");


  const el =
 Hello World

  const el =React.createElement("h1",{
  className:"title",
  bg:"red"
  }, "Hello World");

// Note: this structure is simplified
  const el ={
    type:'h1',
    props:{
    className:'title',
    children:'Hello'
    }
    };
    }
  }

Now that you understand JSX, you can start writing our first React components. 

Reference:

• https://reactjs.org/docs/introducing-jsx.html
• https://en.wikipedia.org/wiki/React_(JavaScript_library)#JSX

Learn React Tutorials Video in Hindi